<template>
  <FullScreenDialog :title="dialog.title" :width="dialog.width" :screenFlag="dialog.screenFlag" :visible="dialog.visible"
    v-if="dialog.visible" :showFooter="dialog.showFooter" @onClose="onClose" @onConfirm="confirm">
    <template v-slot:content>
      <div class="approval-height">
        <div class="left-pdf">
          <showPdf ref="RefShowPdf" :img="showDate.img_info && showDate.img_info[0] && showDate.img_info[0].imageBase64"
            :img-obj="showDate.img_info && showDate.img_info[0] && showDate.img_info[0]"
            :record-list="showDate.recordList" :type="showDate.type"></showPdf>
        </div>
        <div class="right-mark">
          <!-- 1 数据 2 筛选怎么处理 默认第一个吗 -->
          <div class="del-title" v-if="rowValue.stageId">
            <el-select v-model="selectName" placeholder="请选择" size="small" clearable @change="changeName">
              <el-option v-for="item1 in store.getChecks" :key="item1.id" :label="item1.name" :value="item1.name" />
            </el-select>
          </div>
          <showMark :limits="showDate.limits"
            :annotate="showDate.img_info && showDate.img_info[0] && showDate.img_info[0].commentsDTOs"></showMark>
        </div>
      </div>
      <div class="img-page">
        <el-button>{{ showDate.search.pageNumber }}/{{ showDate.numPages }}</el-button>
        <el-button type="primary" @click="btnPre" :disabled="showDate.search.pageNumber === 1">上一页</el-button>
        <el-button type="primary" @click="btnNext"
          :disabled="showDate.search.pageNumber === showDate.numPages">下一页</el-button>
        <el-button type="primary" @click="btnDownPdf">pdf下载</el-button>
      </div>
    </template>
  </FullScreenDialog>>
</template>
<script setup lang='ts'>
import showMark from './showMark.vue'
import showPdf from './showPdf.vue'
import { ref, nextTick } from 'vue'
import useDialog from '@/hooks/useDialog';
import useInstance from '@/hooks/useInstance';
import ApprovalModel from '@/view/02ReviewBusinessMan/01projectManagement/modelTs/approval'
import { checkAnalysisStore } from '@/store/analysis'
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

// 使用
const selectName = ref()
const RefShowPdf = ref()
const { showDate, getFileList,getImageLook, btnPre, btnNext, changeName, clearShowDate } = ApprovalModel(RefShowPdf)
const { dialog, onShow } = useDialog()
const { global, proxy } = useInstance();
const rowValue = ref()
const store = checkAnalysisStore()
// 保存
const confirm = () => { }
const onClose = () => {
  // 清除数据
  selectName.value=''
  dialog.visible = false
  RefShowPdf.value?.clearCanvasDate()
  rowValue.value.stageId=''
  clearShowDate()
}
const show = async (type: string, row?: any) => {
  // sessionStorage.setItem('rowValue', JSON.stringify(row))
  rowValue.value = row
  await getFileList(row)
 const res = await getImageLook({ filesId: row.id, pageNumber: 1 })
  if(!(res.data.length>0)){
    global.$message({ message: '数据处理中 请等待...', type: 'warning' })
    return true
  }
if(row.stageId)  await store.getCheck(row.stageId) // 更多预览有问题 获取不到筛选条目 没有那个参数
  dialog.width = 1334
  dialog.height = 900
  dialog.title = row.fileName
  dialog.showFooter = false
  dialog.screenFlag = false
  onShow()
  // global.$resetForm(addTemForm.value,dialogModel)
  if (showDate.img_info.length > 0) {
    nextTick(() => {
      RefShowPdf.value?.initImage()
    })
  }
}

// pdf下载
const btnDownPdf = async () => {
  // 采用另外一种来操作
  // const vueComponent: any = document.querySelector('.approval-height')
  // // const canvas = await html2canvas(vueComponent)
  //  html2canvas(vueComponent, {
  //   useCORS: true, // 开启CORS，避免跨域问题
  //   scrollY: 0, // 指定截屏的起始Y坐标
  // }).then(function (canvas) {
  //   var link = document.createElement('a');
  //   link.download = 'filename.png';
  //   link.href = canvas.toDataURL();
  //   link.click();
  // });
  // // 获取要导出的Vue组件
  const vueComponent: any = document.querySelector('.approval-height')
  // 获取dom宽度高度
  let pdfWidth = Math.ceil(vueComponent.offsetWidth) 
  let pdfHeght =   Math.ceil(vueComponent.offsetHeight )
  // 需要做一个判断 如果这个图片 宽度大于高度 怎么处理l 高度大于宽度 p
 
  // 使用html2canvas将Vue组件渲染为图片
  const canvas = await html2canvas(vueComponent)
 if(pdfWidth>pdfHeght){
}else{
  [pdfWidth, pdfHeght] = [pdfHeght, pdfWidth];
}
const pdf = new jsPDF('l', 'pt', [pdfWidth, pdfHeght])
  // 创建新的jsPDF文档

  // 将渲染的图片添加到PDF文档中 1pt = 1.33 px 
  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pdfWidth, pdfHeght)

  // 下载PDF文件
  pdf.save(dialog.title + '.pdf')
}
defineExpose({
  show
})
</script>
<style scoped lang='scss'>
.img-page {
  position: absolute;
  height: 40px;
  width: 814px;
  bottom: 5px;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
}

.approval-height {
  // height: 870px; //929-54 875
  display: flex;
  width: 100%;

  .left-pdf {
    width: 814px;
    position: relative;
  }

  .right-mark {
    width: calc(100% - 814px);

    .del-title {
      position: absolute;
      top: 23px;
      z-index: 10;
      left: 825px;
    }
  }
}
</style>